<template>
  <div class="medical-history-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>既往病史管理</span>
        <el-input
          v-model="searchKeyword"
          placeholder="请输入关键词搜索"
          style="width: 300px; margin-left: 20px"
          @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
        <!-- 添加批量删除按钮 -->
        <el-button 
          style="margin-left: 10px; padding: 8px 16px; border-radius: 4px;" 
          type="danger"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text"
          @click="refreshList"
        >
          刷新
        </el-button>
      </div>
      
      <el-table
        :data="historyList"
        border
        style="width: 100%"
        v-loading="loading"
        ref="multipleTable"
      >
        <!-- 添加多选框列 -->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="userId"
          label="用户ID"
          width="100"
        />
        <el-table-column
          prop="userName"
          label="用户昵称"
          width="120"
        />
        <el-table-column
          prop="historyId"
          label="病史ID"
          width="100"
        />
        <el-table-column
          prop="diseaseName"
          label="疾病名称"
          width="150"
        />
        <el-table-column
          prop="recordTime"
          label="记录时间"
          width="180"
        />
        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </el-card>
    <!-- 添加编辑对话框 -->
    <el-dialog
      title="编辑既往病史"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="用户ID">
          <el-input v-model="editForm.userId"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="疾病名称">
          <el-input v-model="editForm.diseaseName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MedicalHistoryManagement',
  data() {
    return {
      historyList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchKeyword: '',
      dialogVisible: false, // 控制对话框显示隐藏
      editForm: {} // 编辑表单数据
    }
  },
  created() {
    this.getHistoryList()
  },
  methods: {
    getHistoryList() {
      this.loading = true
      // 模拟数据
      setTimeout(() => {
        this.historyList = [
          {
            userId: '1001',
            userName: '张三',
            historyId: 'H001',
            diseaseName: '高血压',
            recordTime: '2023-05-10 14:30:22'
          },
          {
            userId: '1002',
            userName: '李四',
            historyId: 'H002',
            diseaseName: '糖尿病',
            recordTime: '2023-05-11 09:15:33'
          }
        ]
        this.total = 2
        this.loading = false
      }, 500)
    },
    handleEdit(row) {
      this.editForm = { ...row }; // 复制当前行数据到编辑表单
      this.dialogVisible = true; // 打开对话框
    },
    handleSave() {
      // 找到要编辑的记录并更新
      const index = this.historyList.findIndex(item => item.historyId === this.editForm.historyId);
      if (index !== -1) {
        this.historyList.splice(index, 1, this.editForm);
        this.$message.success('编辑成功');
      }
      this.dialogVisible = false; // 关闭对话框
    },
    handleDelete(row) {
      this.$confirm(`确定要删除病史 ${row.historyId} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.historyList = this.historyList.filter(item => item.historyId !== row.historyId)
        this.total -= 1
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSearch() {
      this.currentPage = 1
      this.getHistoryList()
    },
    refreshList() {
      this.currentPage = 1
      this.searchKeyword = ''
      this.getHistoryList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getHistoryList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getHistoryList()
    },
    // 实现批量删除方法
    handleBatchDelete() {
      const multipleSelection = this.$refs.multipleTable.selection
      if (multipleSelection.length === 0) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      this.$confirm('确定要删除选中的记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const idsToDelete = multipleSelection.map(item => item.historyId)
        this.historyList = this.historyList.filter(item => !idsToDelete.includes(item.historyId))
        this.total -= multipleSelection.length
        this.$message.success('批量删除成功')
      }).catch(() => {
        this.$message.info('已取消批量删除')
      })
    }
  }
}
</script>

<style scoped>
.medical-history-container {
  padding: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>